<template>
  <div class="login-container"
       v-bind:class="[{'cal-backgound-size-width': !calBgImage },{'cal-backgound-size-height' : calBgImage }]">
    <div class="main-center">
      <div class="page-title">
        <div class="point"></div><span>注册</span>
      </div>
      <div class="line"></div>
      <el-form size="medium"
               label-position="right"
               ref="user"
               :model="user"
               label-width="80px">
        <el-form-item label="账号">
          <el-col :span="7">
            <el-input v-model="user.account"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码">
          <el-col :span="7">
            <el-input v-model="user.password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-col :span="7">
            <el-input v-model="user.rePassword"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="姓名">
          <el-col :span="7">
            <el-input v-model="user.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="7">
            <el-input v-model="user.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="角色">
          <el-col :span="7">
            <el-select filterable
                       v-model="user.roleId"
                       placeholder="请选择">
              <el-option v-for="(item, key) in roles"
                         :key="key"
                         :label="item.roleName"
                         :value="item.roleId"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="register">确定</el-button>
          <el-button @click="() => {this.$router.go(-1)}">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss">
.body-background {
  background: url("../../style/patterns/shattered.png") no-repeat center fixed;
  background-size: cover;
}
.point {
  float: left;
  margin-top: 4px;
  margin-right: 5px;
  height: 27px;
  border: 2px solid #58a3f3;
}
.page-title {
  font-family: PingFangHK-Regular;
  font-size: 25px;
  margin: 10px 0 15px 50px;
}
.line {
  width: 100%;
  border-bottom: 2px solid #f3f3f4;
  margin-bottom: 30px;
}
.main-center {
  width: 1040px;
  height: 100%;
  position: absolute;
  left: 12%;
  background-color: #fff;
}
</style>

<script>
import { validatenull } from '@/utils/validate'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  beforeCreate() {
    document.getElementsByTagName('body')[0].className = 'body-background'
  },
  beforeDestroy() {
    document.getElementsByTagName('body')[0].className = 'gray-bg'
  },
  data() {
    return {
      calBgImage: (document.body.clientWidth / document.body.clientHeight) > 1.92,
      user: {},
      roles: []
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      this.$http.get(api.UNLOGIN_USER_ROLE_LIST).then(
        res => {
          this.roles = res.result
        }
      )
    },
    register() {
      if (validatenull(this.user.account)) return this.$msg._message('请输入登陆账号', 'warning')
      if (validatenull(this.user.name)) return this.$msg._message('请输入用户名', 'warning')
      if (validatenull(this.user.password)) return this.$msg._message('请输入密码', 'warning')
      if (validatenull(this.user.phone)) return this.$msg._message('请输入手机号', 'warning')
      if (validatenull(this.user.roleId)) return this.$msg._message('请选择角色', 'warning')
      if (this.user.password !== this.user.rePassword) return this.$msg._message('两次输入的密码不同', 'warning')
      const params = {
        name: this.user.name,
        userName: this.user.account,
        password: this.user.password,
        telNum: this.user.phone,
        roleId: this.user.roleId
      }
      this.$http.post(api.REGISTER, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('注册成功！', 'success')
            this.$router.push({ name: 'login' })
          } else {
            this.$msg._message(res.error.message, 'error')
          }
        }
      )
    }
  }
}
</script>

